<template>
	<view class="my-bg-wrap">
		<image class="my-bg-img" src="https://yun.qiongtuyule.com/static/img/my/bg.png" mode="widthFix"></image>
		<view class="my-bg-content">
			<view class="my-head"></view>
			<view class="my-top-new">
				<view class="my-top-info">
					<view class="my-top-title-row" @tap="goToProfile">
						<text class="my-top-title-bold">{{contact_info.staff_name}}</text>
						<m-icon type="arrowright" size="20" color="#333" class="my-arrow"></m-icon>
					</view>
					<view class="my-top-id">ID:{{contact_info.id}}</view>
					<view class="my-top-stats">
						<view class="my-top-stats-ellipse">{{contact_info.depart_count}}个项目 |
							{{contact_info.area_count}}个监测设备
						</view>
					</view>
				</view>
				<image :src="contact_info.avatar" class="my-top-img-new"></image>
			</view>
			<view class="my-section">
				<view class="my-section-title-row">
					<text class="my-section-title">项目人员管理</text>
					<view class="my-section-avatars-new">

						<block v-for="(member, idx) in memberList" :key="idx">
							<image v-if="idx < 2" :src="member" class="my-section-avatar-new"></image>
						</block>
						<view class="my-section-avatar-add-new" @click="addMember">
							<m-icon type="plus" size="16" color="#999"></m-icon>
						</view>
					</view>
				</view>
				<view class="my-section-desc">{{memberList.length}}个成员</view>
			</view>
			<view class="my-menu">
				<view class="my-menu-item" @click="goToDoc">
					<image src="https://yun.qiongtuyule.com/static/img/my/zujian1.png" class="my-menu-icon"></image>
					<text>使用文档</text>
					<m-icon type="arrowright" size="18" color="#bbb" class="my-menu-arrow"></m-icon>
				</view>
				<view class="my-menu-item" @click="goToNotice">
					<image src="https://yun.qiongtuyule.com/static/img/my/zujian2.png" class="my-menu-icon"></image>
					<text>通知管理</text>
					<m-icon type="arrowright" size="18" color="#bbb" class="my-menu-arrow"></m-icon>
				</view>
				<view class="my-menu-item" @click="goToSetting">
					<image src="https://yun.qiongtuyule.com/static/img/my/zujian3.png" class="my-menu-icon"></image>
					<text>设置</text>
					<m-icon type="arrowright" size="18" color="#bbb" class="my-menu-arrow"></m-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import mIcon from '@/components/m-icon/m-icon.vue'
	export default {
		components: {
			mIcon
		},
		data() {
			return {
				depart_id: 0,
				contact_info: [],
				message_list: [],
				// 动态加载头像，实际开发可从接口获取
				memberList: [{
						avatar: '/static/img/user-icon1.png'
					},
					{
						avatar: '/static/img/user-icon2.png'
					},
					{
						avatar: '/static/img/user-icon1.png'
					},
				],
				projectStatText: '2个项目 | 16个监测设备',
				maxAvatars: 2 // 最多显示2个头像，防止溢出
			}
		},
		onShow() {
			
			
			this.get_contact_info()
			this.get_xiaoxi_list();
		},
		computed: {
			...mapState(['userInfo', 'loginStatus', 'loginInfo', 'TabBarBadge'])
		},
		methods: {
			getWeChatOpenId() {
				
				if(this.contact_info.openid){
					return;
				}
				
				let that = this
				// 调用小程序 wx.login 获取临时登录凭证 code
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log('login code:', res.code);
						// 把 code 传给后端
						that.getcode(res.code)
					}
				});
			},
			async getcode(code) {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.getWeChatOpenId,
					data: {
						code: code,
					},
					needLogin: true
				})
				if (res.code === 1) {
					this.message_list = []
					this.message_list = res.data.item
					this.$forceUpdate();
				}
			},
			goToProfile() {
				uni.navigateTo({
					url: '/pages/my/info'
				})
			},
			goToDoc() {
				uni.navigateTo({
					url: '/pages/my/help'
				})
			},
			goToNotice() {
				uni.navigateTo({
					url: '/pages/my/notice'
				})
			},
			goToSetting() {
				uni.navigateTo({
					url: '/pages/my/setting'
				})
			},
			addMember() {
				// uni.showToast({
				// 	title: '添加成员',
				// 	icon: 'none'
				// })
				uni.navigateTo({
					url: '/pages/shouye/detail_setting?project_id=' + this.depart_id
				})
			},
			async get_xiaoxi_list() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.noticeList,
					data: {
						page: 1,
						limit: 10
					},
					needLogin: true
				})
				if (res.code === 1) {
					this.message_list = []
					this.message_list = res.data.item
					this.$forceUpdate();
				}
			},
			async get_contact_info() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.staffInfo,
					data: {},
					needLogin: true
				})
				if (res.code == 1) {
					this.contact_info = res.data;
					this.memberList = res.data.depart_user;
					this.depart_id = res.data.depart_id[0];
					this.getWeChatOpenId()
				}
			}
		}
	}
</script>

<style>
	.my-bg-wrap {
		position: relative;
		min-height: 100vh;
		width: 100vw;
		overflow: hidden;
	}

	.my-bg-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 0;
		object-fit: cover;
		opacity: 1;
	}

	.my-bg-content {
		position: relative;
		z-index: 1;
		min-height: 100vh;
		width: 100vw;
		background: rgba(255, 255, 255, 0.05);
		overflow: hidden;
	}

	.my-top-new {
		margin: 32px 18px 0 18px;
		background: transparent;
		border-radius: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: none;
		padding: 0 0 0 0;
		min-height: 100px;
		margin-bottom: 24px;
	}

	.my-top-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 8px;
		min-width: 0;
		margin-left: 10rpx;
	}

	.my-top-title-row {
		display: flex;
		align-items: center;
		cursor: pointer;
		margin-bottom: 2px;
		min-width: 0;
		margin-left: 40rpx;
		margin-top: 100rpx;
		-webkit-tap-highlight-color: transparent;
		user-select: none;
	}

	.my-top-title-bold {
		font-weight: bold;
		font-size: 30px;
		color: #222;
		margin-right: 0px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.my-arrow {
		margin-left: 2px;
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.my-arrow:hover {
		transform: translateX(2px);
	}

	.my-top-id {
		font-size: 14px;
		color: #8a8a8a;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-left: 16px;
	}

	.my-top-stats {
		margin-top: 2px;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.my-top-stats-ellipse {
		display: inline-block;
		background: rgba(230, 240, 255, 0.6);
		border-radius: 16px;
		padding: 4px 18px;
		font-size: 14px;
		color: #a8b4c5;
		box-shadow: 0 1px 4px #e3eaf6;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 220px;
	}

	.my-top-img-new {
		width: 92px;
		height: 92px;
		border-radius: 50%;
		border: 3px solid #fff;
		box-shadow: 0 2px 12px #e3eaf6;
		align-self: center;
		margin-left: 38px;
		margin-right: 8px;
		flex-shrink: 0;
		margin-top: 120rpx;
	}

	.my-section {
		background: linear-gradient(to bottom,
				rgba(230, 240, 255, 0.6),
				rgba(255, 255, 255, 0.6));
		margin: 0 18px;
		margin-bottom: 24px;
		border-radius: 14px;
		padding: 12px 22px 8px 22px;
		box-shadow: 0 2px 12px #e3eaf6;
		overflow: hidden;
	}

	.my-section-title-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1px;
	}

	.my-section-title {
		font-size: 17px;
		font-weight: bold;
		color: #000000;
		letter-spacing: 1px;
		margin-top: -25px;
	}

	.my-section-avatars-new {
		width: 178px;
		height: 69px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: relative;
	}

	.my-section-avatar-new {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 0 2px 8px #e3eaf6;
		background: #f3f3f3;
		position: absolute;
		right: 56px;
		z-index: 1;
	}

	.my-section-avatar-new:nth-child(2) {
		right: 28px;
		z-index: 2;
	}

	.my-section-avatar-add-new {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		background: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px dashed #ccc;
		cursor: pointer;
		position: absolute;
		right: 0;
		z-index: 3;
	}

	.my-section-desc {
		font-size: 14px;
		color: #8a8a8a;
		margin-top: -36px;
		margin-left: 2px;
		margin-bottom: 20px;
	}

	.my-menu {
		background: rgba(255, 255, 255, 0.97);
		margin: 0 18px;
		margin-bottom: 24px;
		border-radius: 14px;
		box-shadow: 0 2px 12px #e3eaf6;
		padding: 20px 0 20px 0;
		display: flex;
		flex-direction: column;
		gap: 18px;
		font-size: 55px;
		font-weight: bold;
	}

	.my-menu-item {
		display: flex;
		align-items: center;
		padding: 0 18px;
		font-size: 18px;
		color: #222;
		cursor: pointer;
		min-height: 38px;
		-webkit-tap-highlight-color: transparent;
		user-select: none;
	}

	.my-menu-item m-icon {
		margin-right: 12px;
	}

	.my-menu-arrow {
		margin-left: auto;
	}

	.my-menu-icon {
		width: 28px;
		height: 28px;
		margin-right: 12px;
	}
</style>